<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="style-example">
			<!--  style 绑定样式-->
			<div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">xx</div>
			<!-- style 对象绑定 -->
			<div v-bind:style="styleObject">styleyObject</div>
			<!--style 同样可以数组绑定，可以参照class的绑定方式 -->
			
			<!-- 
			从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：
			这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
			-->
			<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">ddd</div>

		</div>	
		<script type="text/javascript">
			//style 绑定
			let app=new Vue({
				el:'#style-example',
				data:{
					activeColor:'red',
					fontSize:'12',
					styleObject:{
						color:'red',
						fontSize:'30px',
					}
				}
			})
			
		</script>	
		<style type="text/css">
			
		</style>
	</body>
</html>
